<template>
	<view class="page-container">
		<image class="bg-image" src="/static/images/bg.png" mode="aspectFill"></image>
		<view class="content">
			<view class="header">
				<view class="header-content">
					<text class="title">找回密码</text>
					<text class="subtitle">请使用手机号验证身份</text>
				</view>
			</view>
			
			<view class="form-section">
				<view class="form-title">
					<text class="title-text">重置密码</text>
					<text class="title-desc">为了您的账号安全，请完成身份验证</text>
				</view>
				
				<view class="input-group">
					<view class="input-wrapper">
						<text class="input-label">手机号</text>
						<view class="input-content">
							<text class="input-icon">📱</text>
							<input 
								type="number" 
								v-model="phone" 
								placeholder="请输入手机号" 
								maxlength="11"
								class="custom-input"
							/>
						</view>
					</view>
					
					<view class="input-wrapper">
						<text class="input-label">验证码</text>
						<view class="input-content">
							<text class="input-icon">🔑</text>
							<input 
								type="number" 
								v-model="code" 
								placeholder="请输入验证码" 
								maxlength="6"
								class="custom-input"
							/>
							<button 
								class="verification-btn" 
								:disabled="countdown > 0"
								@click="sendCode"
							>
								{{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
							</button>
						</view>
					</view>
					
					<view class="input-wrapper">
						<text class="input-label">新密码</text>
						<view class="input-content">
							<text class="input-icon">🔒</text>
							<input 
								:type="showPassword ? 'text' : 'password'" 
								v-model="password" 
								placeholder="请设置新密码" 
								class="custom-input"
							/>
							<text class="toggle-password" @click="togglePassword">
								{{ showPassword ? '👁️' : '👁️‍🗨️' }}
							</text>
						</view>
					</view>
					
					<view class="input-wrapper">
						<text class="input-label">确认密码</text>
						<view class="input-content">
							<text class="input-icon">🔒</text>
							<input 
								:type="showPassword ? 'text' : 'password'" 
								v-model="confirmPassword" 
								placeholder="请再次输入新密码" 
								class="custom-input"
							/>
						</view>
					</view>
				</view>
				
				<view class="action-buttons">
					<button class="reset-btn" @click="handleReset">重置密码</button>
				</view>
				
				<view class="bottom-links">
					<text class="link-item" @click="goToLogin">返回登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '',
			code: '',
			password: '',
			confirmPassword: '',
			showPassword: false,
			countdown: 0
		}
	},
	methods: {
		// 发送验证码
		sendCode() {
			if (!this.phone || this.phone.length !== 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// TODO: 调用发送验证码接口
			this.countdown = 60
			const timer = setInterval(() => {
				if (this.countdown > 0) {
					this.countdown--
				} else {
					clearInterval(timer)
				}
			}, 1000)
		},
		
		// 切换密码显示
		togglePassword() {
			this.showPassword = !this.showPassword
		},
		
		// 重置密码
		handleReset() {
			if (!this.phone || this.phone.length !== 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			if (!this.code || this.code.length !== 6) {
				uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				})
				return
			}
			
			if (!this.password || this.password.length < 6) {
				uni.showToast({
					title: '密码长度不能少于6位',
					icon: 'none'
				})
				return
			}
			
			if (this.password !== this.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})
				return
			}
			
			// TODO: 调用重置密码接口
			uni.showToast({
				title: '密码重置成功',
				icon: 'success',
				duration: 2000,
				success: () => {
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}
			})
		},
		
		// 返回登录页
		goToLogin() {
			uni.navigateTo({
				url: '../login/login'
			})
		}
	}
}
</script>

<style lang="scss">
.page-container {
	min-height: 100vh;
	position: relative;
	background: #f8f9fa;
	overflow: hidden;
	
	.bg-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 0.1;
	}
	
	.content {
		position: relative;
		z-index: 2;
		padding: 2vh 4vw;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-y: auto;
	}
	
	.header {
		margin-bottom: 2vh;
		padding: 1vh 0;
	}
	
	.header-content {
		text-align: center;
		margin-bottom: 1vh;
	}
	
	.title {
		font-size: calc(32rpx + 2vw);
		font-weight: 600;
		color: #333;
		margin-bottom: 0.6vh;
		background: linear-gradient(45deg, #ff69b4, #ff1493);
		-webkit-background-clip: text;
		color: transparent;
		text-shadow: 0 2rpx 4rpx rgba(255,105,180,0.1);
	}
	
	.subtitle {
		font-size: calc(20rpx + 0.4vw);
		color: #666;
		letter-spacing: 2rpx;
	}
	
	.form-section {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 24rpx;
		padding: 3vh 4vw;
		box-shadow: 0 12rpx 36rpx rgba(255,105,180,0.15);
		backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255,255,255,0.9);
		width: 100%;
		box-sizing: border-box;
		animation: fadeIn 1s ease 0.3s both;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.form-title {
		text-align: center;
		margin-bottom: 3vh;
		padding: 1vh 0;
	}
	
	.title-text {
		font-size: calc(28rpx + 0.4vw);
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 0.4vh;
		letter-spacing: 2rpx;
	}
	
	.title-desc {
		font-size: calc(20rpx + 0.3vw);
		color: #999;
		letter-spacing: 1rpx;
	}
	
	.input-group {
		margin-bottom: 2vh;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		overflow-y: auto;
	}
	
	.input-wrapper {
		margin-bottom: 1.8vh;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.input-label {
		font-size: calc(24rpx + 0.2vw);
		color: #333;
		font-weight: 500;
		margin-right: 2.5vw;
		white-space: nowrap;
		min-width: 90rpx;
		letter-spacing: 1rpx;
	}
	
	.input-content {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 1.2vh 2vw;
		border: 2rpx solid rgba(255,105,180,0.15);
		transition: all 0.3s ease;
	}
	
	.input-content:focus-within {
		border-color: #ff69b4;
		box-shadow: 0 6rpx 16rpx rgba(255,105,180,0.15);
		background: #fff;
		transform: translateY(-1rpx);
	}
	
	.input-icon {
		font-size: 32rpx;
		margin-right: 1vw;
	}
	
	.custom-input {
		flex: 1;
		font-size: calc(24rpx + 0.2vw);
		color: #333;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}
	
	.custom-input::placeholder {
		color: #999;
		font-size: calc(22rpx + 0.2vw);
		font-weight: 300;
	}
	
	.toggle-password {
		font-size: 32rpx;
		padding: 0 1vw;
	}
	
	.verification-btn {
		padding: 1.2vh 2vw;
		font-size: calc(22rpx + 0.2vw);
		color: #ff69b4;
		background: rgba(255,105,180,0.1);
		border-radius: 0 12rpx 12rpx 0;
		border: none;
		white-space: nowrap;
		transition: all 0.3s ease;
		font-weight: 500;
		
		&:active {
			opacity: 0.8;
		}
		
		&[disabled] {
			color: #999;
			background: #f5f5f5;
		}
	}
	
	.action-buttons {
		margin-top: 2vh;
		padding: 1vh 0;
	}
	
	.reset-btn {
		width: 100% !important;
		height: 88rpx !important;
		background: linear-gradient(135deg, #ff69b4, #ff1493) !important;
		box-shadow: 0 8rpx 24rpx rgba(255,105,180,0.3) !important;
		font-size: 30rpx !important;
		font-weight: 600 !important;
		transition: all 0.3s ease !important;
		letter-spacing: 6rpx !important;
		position: relative;
		overflow: hidden;
		border-radius: 44rpx !important;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(255,105,180,0.2) !important;
		}
	}
	
	.bottom-links {
		margin-top: 2vh;
		text-align: center;
		padding: 1vh 0;
	}
	
	.link-item {
		display: inline-flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		color: #666;
		letter-spacing: 1rpx;
		
		&:active {
			opacity: 0.8;
		}
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@media screen and (max-width: 320px) {
		.content {
			padding: 1.5vh 3vw;
		}
		
		.form-section {
			padding: 2vh 3vw;
		}
		
		.input-label {
			font-size: 22rpx;
			margin-right: 2vw;
			min-width: 80rpx;
		}
		
		.input-content {
			padding: 1vh 1.5vw;
		}
		
		.verification-btn {
			padding: 1vh 1.5vw;
		}
	}
}
</style>
